<!-- 缴费记录 -->
<template>
  <div class="page-container">
    <div class="table-page-search">
      <a-form>
        <template v-if="!id">
          <a-form-item label="会员名称:">
            <a-input v-model="queryParam.keyword" placeholder="搜索会员名称" allowClear />
          </a-form-item>
          <a-form-item label="会员职务">
            <a-select v-model="queryParam.levelId" allowClear class="min-width-15">
              <a-select-option value="">全部</a-select-option>
              <a-select-option v-for="(item, idx) in typeList" :key="idx" :value="item.id" :label="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="缴费类型">
            <a-select v-model="queryParam.type" allowClear placeholder="请选择">
              <a-select-option
                v-for="dict in Dict.getLocal('paymentType')"
                :key="dict.dictValue"
                :value="dict.dictValue"
              >
                {{ dict.dictLabel }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </template>
        <a-form-item label="时间" allowClear>
          <a-range-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model="joinTime" class="width-25" />
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="() => (queryParam = { status: '', beginTime: undefined, endTime: undefined })"
            >重置</a-button
          >
        </span>
      </a-form>
      <div class="table-operator disFlxJS">
        <div></div>
        <CustomTable :name="$route.name" :columns="columns" :newColumns="newColumns" />
      </div>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id, title"
      :columns="newColumns"
      :data="loadData"
      :rowSelection="null"
      :rangPicker="range"
    >
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span>
      <!-- 缴费类型 -->
      <span slot="type" slot-scope="text, record">
        <DictTag :options="Dict.getLocal('paymentType')" :value="text" isText showBorder />
      </span>
      <!-- 应缴费用 -->
      <span slot="money" slot-scope="text, record">
        {{ (record.money || 0) + '元' }}
      </span>
      <!-- 实缴费用 -->
      <span slot="nowMoney" slot-scope="text, record">
        {{ (record.nowMoney || 0) + '元' }}
      </span>
      <!-- 缴费凭证 -->
      <span slot="paymentVoucher" slot-scope="text, record">
        <ImgOrVideo
          v-if="record.paymentVoucher"
          :item="{ coverUrl: record.paymentVoucher, url: record.paymentVoucher }"
          preview
          :width="50"
          :height="50"
        />
      </span>
      <span slot="sysUserName"  slot-scope="text, record">
        {{ getSysUserNameText(record.sysUserName, record.payMode)  }}
      </span>
      <!-- 缴费方式 -->
      <span slot="payMode" slot-scope="text, record">
        {{ record.payMode | getPayModeText }}
      </span>

      <!-- 操作 -->
      <span slot="action" slot-scope="text, record">
        <template>
          <a-button
            v-has="'member:paymentManage:recordDetail'"
            type="primary"
            ghost
            size="small"
            class="_mr-5"
            @click="gotoPay(record.id)"
          >
            详情
          </a-button>
        </template>
      </span>
    </s-table>
    <RecordDetail ref="RecordDetail"></RecordDetail>
  </div>
</template>

<script>
import { STable } from '@/components'
import { getList } from '@/api/member/record'
import { memberLevelGetDownList } from '@/api/system/system'
import RecordDetail from './components/recordDetail'
import CustomTable from '@/components/Cuscolumn'
import { payModeDict } from '@/api/order/order'
import ImgOrVideo from '@/components/ImgOrVideo'
import DictTag from '@/components/DictTag'

export default {
  props: ['id'],
  components: {
    STable,
    RecordDetail,
    CustomTable,
    ImgOrVideo,
    DictTag,
  },
  data() {
    return {
      typeList: [],
      pagination: {
        current: 1,
        pageSize: 10,
      },
      queryParam: {
        levelId: '',
        type: undefined,
        beginTime: undefined,
        endTime: undefined,
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px',
        },
        {
          title: '会员名称',
          dataIndex: 'memberName',
          width: '200px',
        },
        {
          title: '会员职务',
          dataIndex: 'nowLevelName',
          width: '120px',
        },
        {
          title: '缴费类型',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
          width: '100px',
        },
        {
          title: '开始时间',
          dataIndex: 'startTime',
          width: '180px',
        },
        {
          title: '到期时间',
          dataIndex: 'endTime',
          width: '180px',
        },
        {
          title: '应缴费用',
          dataIndex: 'money',
          scopedSlots: { customRender: 'money' },
          width: '120px',
        },
        {
          title: '实缴费用',
          dataIndex: 'nowMoney',
          scopedSlots: { customRender: 'nowMoney' },
          width: '120px',
        },
        {
          title: '缴费凭证',
          dataIndex: 'paymentVoucher',
          scopedSlots: { customRender: 'paymentVoucher' },
          width: '120px',
        },
        {
          title: '审核人员',
          dataIndex: 'sysUserName',
          scopedSlots: { customRender: 'sysUserName' },
          width: '140px',
        },
        {
          title: '缴费操作时间',
          dataIndex: 'createTime',
          width: '180px',
        },
        {
          title: '缴费方式',
          dataIndex: 'payMode',
          scopedSlots: { customRender: 'payMode' },
          width: '120px',
        },
        {
          title: '操作',
          width: '80px',
          dataIndex: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      range: null,
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize,
          memberId: this.id || undefined,
        }
        return getList(Object.assign(params, this.queryParam))
          .then((res) => {
            if (res.code === 0) {
              this.pagination.current = parameter.pageNum
              this.pagination.pageSize = parameter.pageSize
              return res
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch((err) => {
            this.$message.error(err.msg)
          })
      },
    }
  },
  created() {
    this.getList()
  },
  computed: {
    joinTime: {
      get() {
        return [this.queryParam.beginTime, this.queryParam.endTime]
      },
      set(val) {
        this.queryParam.beginTime = val[0]
        this.queryParam.endTime = val[1]
      },
    },
    newColumns() {
      const currentColumns = this.$store.state.user.customTable
      if (currentColumns && currentColumns[this.$route.name]) {
        return this.$options
          .data()
          .columns.filter((v) => {
            const _items = currentColumns[this.$route.name].find((item) => item === v.title || item.title === v.title)
            if (_items) return Object.assign(v, _items)
          })
          .sort((a, b) => {
            return a.tableSort - b.tableSort
          })
      } else {
        return this.columns
      }
    },
  },
  methods: {
    getList() {
      memberLevelGetDownList().then((res) => {
        this.typeList = res.data
      })
    },
    gotoPay(id) {
      this.$refs.RecordDetail.moduleShow(id)
    },
    getSysUserNameText(sysUserName, payMode) {
      if (payMode === payModeDict[0].value) {
        return '-'
      }
      return sysUserName
    },
  },
  filters: {
    getPayModeText(text) {
      return payModeDict.find((v) => v.value === text).label
    },
  },
}
</script>
<style scoped lang="less"></style>
